<template>
  <transition :css="false" @enter="enter" @leave="leave">
    <div class="list-player" v-show="isListPlayer">
      <div class="player-wrapper">
        <!-- 头部 -->
        <div class="player-top">
          <div class="top-left">
            <div class="mode loop" ref="mode" @click="mode"></div>
            <p v-if="modeType===0">顺序播放</p>
            <p v-else-if="modeType===1">单曲循环</p>
            <p v-else>随机播放</p>
          </div>
          <div class="top-right">
            <div class="del" @click="delAll"></div>
          </div>
        </div>
        <!-- 中间区域 -->
        <div class="player-middle">
          <scrollView ref="scrollView">
            <ul ref="play">
              <li
                class="item"
                v-for="(i,index) in getSongs"
                :key="i.id"
                @click="selectMusic(index)"
              >
                <div class="item-left">
                  <div class="item-play" @click.stop="play" v-show="currentIndex===index"></div>
                  <p>{{i.name}}</p>
                </div>
                <div class="item-right">
                  <div class="item-favorite"></div>
                  <div class="item-del" @click.stop="del(index)"></div>
                </div>
              </li>
            </ul>
          </scrollView>
        </div>
        <!-- 关闭按钮 -->
        <div class="player-bottom" @click="hiddenListPlayer">
          <p>关闭</p>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import scrollView from '@/components/scrollView'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
import { mapGetters, mapActions } from 'vuex'
import modeType from '../../store/modeType'
export default {
  name: 'ListPlayer',
  components: {
    scrollView
  },
  data () {
    return {
      isShow: false
    }
  },
  watch: {
    isPlaying (newValue, oldValue) {
      // true显示暂停
      if (newValue) {
        this.$refs.play.classList.add('active')
      } else {
        this.$refs.play.classList.remove('active')
      }
    },
    // 监听单曲 循环 随机图标的变化
    modeType (newValue, oldValue) {
      if (newValue === modeType.loop) {
        // 是循环展示循环的图标 单曲展示单曲
        this.$refs.mode.classList.add('loop')
        // 移除随机图标
        this.$refs.mode.classList.remove('random')
      } else if (newValue === modeType.one) {
        this.$refs.mode.classList.add('one')
        this.$refs.mode.classList.remove('loop')
      } else {
        this.$refs.mode.classList.add('random')
        this.$refs.mode.classList.remove('one')
      }
    },
    // 监听列表播放界面的显示与隐藏
    isListPlayer (newVal, oldVal) {
      if (newVal) {
        this.$refs.scrollView.refresh()
      }
    }
  },
  methods: {
    ...mapActions(['setIsPlaying', 'setModeType', 'setListType', 'setDelSong', 'setCurrentIndex']),
    show () {
      this.isShow = true
    },
    hiddenListPlayer () {
      this.setListType(false)
    },
    enter (el, done) {
      Velocity(el, 'transition.perspectiveUpIn', { duration: 500 }, function () {
        done()
      })
    },
    leave (el, done) {
      Velocity(el, 'transition.perspectiveUpOut', { duration: 500 }, function () {
        done()
      })
    },
    play () {
      this.setIsPlaying(!this.isPlaying)
    },
    // 播放模式点击
    mode () {
      // 如果是循环模式 切换单曲
      if (this.modeType === modeType.loop) {
        this.setModeType(modeType.one)
      } else if (this.modeType === modeType.one) {
        // 单曲点击变成随机
        this.setModeType(modeType.random)
      } else {
        // 随机点击变成循环
        this.setModeType(modeType.loop)
      }
    },
    // 删除列表单个歌曲
    del (index) {
      this.setDelSong(index)
    },
    // 删除所有
    delAll () {
      this.setDelSong()
    },
    // 歌曲点击
    selectMusic (index) {
      console.log(index)
      this.setCurrentIndex(index)
    }
  },
  computed: {
    ...mapGetters(['isPlaying', 'modeType', 'isListPlayer', 'getSongs', 'currentIndex'])
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/variable";
@import "@/assets/css/mixin";
.list-player {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  @include bg_sub_color();
  .player-wrapper {
    .player-top {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-left {
        display: flex;
        align-items: center;
        padding-left: 20px;
        .mode {
          width: 56px;
          height: 56px;
          margin-right: 20px;
          &.loop {
            @include bg_img("../../assets/images/small_loop");
          }
          &.one {
            @include bg_img("../../assets/images/small_one");
          }
          &.random {
            @include bg_img("../../assets/images/small_shuffle");
          }
        }
        p {
          @include font_size($font_medium_s);
          @include font_color();
        }
      }
      .top-right {
        .del {
          width: 84px;
          height: 84px;
          @include bg_img("../../assets/images/small_del");
        }
      }
    }
    .player-middle {
      height: 700px;
      overflow: hidden;
      ul {
        &.active {
          .item {
            .item-play {
              @include bg_img("../../assets/images/small_pause");
            }
          }
        }
      }
      .item {
        border-top: 1px solid #ccc;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        .item-left {
          width: 70%;
          display: flex;
          align-items: center;
          .item-play {
            width: 56px;
            height: 56px;
            margin-right: 20px;
            @include bg_img("../../assets/images/small_play");
          }
          p {
            width: 80%;
            @include font_size($font_medium_s);
            @include font_color();
            @include no-wrap();
          }
        }
        .item-right {
          display: flex;
          align-items: center;
          .item-favorite {
            width: 56px;
            height: 56px;
            @include bg_img("../../assets/images/small_un_favorite");
            &.active {
              @include bg_img("../../assets/images/small_favorite");
            }
          }
          .item-del {
            width: 52px;
            height: 52px;
            margin-left: 20px;
            @include bg_img("../../assets/images/small_close");
          }
        }
      }
    }
    .player-bottom {
      width: 100%;
      height: 100px;
      line-height: 100px;
      @include bg_color();
      p {
        text-align: center;
        color: #fff;
        @include font_size($font_medium);
      }
    }
  }
}
</style>
